<template>
  <div class="form">
    <span class="btn"  onclick="captureImage()">拍照</span>
		<span class="btn"  onclick="scanImg()">扫描图片</span>
		<span class="btn"  onclick="galleryImg()">从相册中选取</span>
    <!-- 返回的错误信息 -->
    <div class="error" v-show="errorMsg.length!=0">
      {{errorMsg}}
    </div>
    <!-- 帐号 -->
    <div class="row-1">
      <div class="label">
        <label class="label-1">账号</label>
        <span v-show="accountErrorMsg.length!=0">{{accountErrorMsg}}</span>
      </div>
      <div class="input">
        <input type="text" placeholder="请输入您的账号" v-model.trim="account" />
      </div>
      <div class="help" v-on:click="clearAccount()">
        <img src="./img/del.png" />
      </div>
      <div class="clearfix"></div>
    </div>
    <!-- 密码 -->
    <div class="row-1">
      <div class="label">
        <label class="label-1">密码</label>
        <span v-show="pwdErrorMsg.length!=0">{{pwdErrorMsg}}</span>
      </div>
      <div class="input">
        <input type="password" placeholder="请输入您的密码" v-model.trim="pwd" v-show="isClosedEye" />
        <input type="text" placeholder="请输入您的密码" v-model.trim="pwd" v-show="!isClosedEye" />
      </div>
      <div class="help" v-on:click="togglePwd()">
        <img src="./img/Closed Eye.png" v-show="isClosedEye" />
        <img src="./img/EYE.png" v-show="!isClosedEye" />
      </div>
      <div class="clearfix"></div>
    </div>
    <!-- 登录-->
    <div class="button submit">
      <div v-show="!isConfirm" v-on:click="confirm()">
        登录
      </div>
      <!-- loading图 -->
      <div class="loading" v-show="isConfirm">
        <img src="./img/loading.png" />
      </div>
    </div>

  </div>
</template>
<script>
// 引入当前页面样式表
import "./login.css";
import "./form.css";

export default {
  name: "login",
  data() {
    return {
      // 帐号输入值
      account: "",
      // 密码输入值
      pwd: "",
      // loading显示隐藏
      isConfirm: false,
      // 密码显示显示隐藏
      isClosedEye: true,
      // 返回用户信息是否存在
      errorMsg: "",
      // 账户错误信息提示
      accountErrorMsg: "",
      // 密码错误信息提示
      pwdErrorMsg: ""
    };
  },
  mounted() {
 
  },

  methods: {
    // 拍照
  captureImage(){
	var cmr = plus.camera.getCamera();
	var res = cmr.supportedImageResolutions[0];
	var fmt = cmr.supportedImageFormats[0];
	console.log("Resolution: "+res+", Format: "+fmt);
	cmr.captureImage( function( path ){
			alert( "Capture image success: " + path );  
		},
		function( error ) {
			alert( "Capture image failed: " + error.message );
		},
		{resolution:res,format:fmt}
	);
},
// 扫描图片
 scanImg() {
	plus.barcode.scan( '_www/barcode.png', function (type,result) {
			alert( "Scan success:("+type+")"+result );
		}, function (error) {
			alert( error.message );
		} );
},
// 从相册中选择图片 
 galleryImg() {
	// 从相册中选择图片
	console.log("从相册中选择图片:");
    plus.gallery.pick( function(path){
    	console.log(path);
    }, function ( e ) {
    	console.log( "取消选择图片" );
    }, {filter:"image"} );
},
    //清空输入框
    clearAccount: function() {
      this.account = "";
    },
    //显示，隐藏密码
    togglePwd: function() {
      this.isClosedEye = !this.isClosedEye;
    },
    // 点击登录提交信息
    confirm: function() {
      var _that = this;
      _that.isConfirm = true;
      // 判断帐号是否为空
      if (_that.account.length === 0) {
        _that.accountErrorMsg = "账号不能为空";
        _that.isConfirm = false;
        return false;
      } else {
        _that.accountErrorMsg = "";
      }
      // 判断密码为3-8位数字或者字母
      if (!/^([0-9]|[a-zA-Z]){3,8}$/.test(_that.pwd)) {
        _that.isConfirm = false;
        _that.pwdErrorMsg = "密码格式不正确";
        return false;
      } else {
        _that.pwdErrorMsg = "";
        // 判断用户是否存在的url
        var url = api + "/Login";
        $.ajax({
          type: "GET",
          url: url,
          dataType: "json",
          data: {
            // 用户名
            u: _that.account,
            // 密码
            p: _that.pwd
          },
          success: function(result) {
            // 返回结果
            console.log("login:", result);
            if (result.state == 0) {
              _that.errorMsg = "帐号或者密码不正确";
              // loading效果消失
              _that.isConfirm = false;
            } else {
              // loading效果消失
              _that.isConfirm = false;
              //  把标识符储存在本地
              localStorage.setItem("token", JSON.stringify(result.token));
              console.log("token:", JSON.parse(localStorage.getItem("token")));
              // 用户存在，跳转路由
              _that.$router.push("/root");
            }
          },
          error: function(error) {
            // 请求失败提示信息
            alert("系统异常");
            // loading效果消失
            _that.isConfirm = false;
          }
        });
      }
    }
  }
};
</script>
<style lang="css" scoped>
.btn{
				display: inline-block;
				margin:10px 10px;
				cursor: pointer; background: #00FF7F;border-radius: 5px;padding:5px 10px;
			}
</style>

